<template>
  <div class="home">
    <!-- 内容 -->
    <base-breadcrumb class="home-readcrumb"></base-breadcrumb>

    <p>该数据已表格形式展示</p>
    <base-tab :columns="columns" :data="data"></base-tab>
  </div>
</template>

<script>
import baseBreadcrumb from '../../components/baseBreadcrumb.vue';
import baseTab from '../../components/baseTab.vue';

export default {
  data() {
    return {
      currDate: '',
      columns: [
        {
          dataIndex: 'name',
          key: 'name',
          slots: { title: 'currTitle' },
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: '地址',
          dataIndex: 'address',
          key: 'address',
        },
        {
          title: '标签',
          key: 'tags',
          dataIndex: 'tags',
          scopedSlots: { customRender: 'tags' },
        },
        {
          title: '选项',
          key: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      data: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
          tags: ['好', '发展中'],
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park',
          tags: ['失败'],
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
          tags: ['酷', '教师'],
        },
      ],
    };
  },
  components: {
    baseBreadcrumb,
    baseTab,
  },
  created() {},
  methods: {
    btnEvent() {},
  },
};
</script>

<style lang="less" scoped>
.home {
  padding: 20px;
}
.home-header {
  display: flex;
  justify-content: space-between;
  line-height: 24px;
}
.home-header-left {
  font-size: 24px;
  font-weight: 700;
}
.home-readcrumb {
  margin-top: 20px;
}
</style>
